<template>
    <div>
        <div @click="setpicturesize(false)" @mousewheel.prevent="setpicsizescroll($event)">
            <div class="imgsize">           
                <img :src="srcURL" :height="height+'%'"  class="largepic" :style="'top:'+top+'%;'+'left:'+left+'%;'">
            </div>
            <div class="shadow"></div>
            <div class="shadow"></div>

        </div>

    </div>
</template>

<script>
import { mapMutations } from "vuex"
export default {
    name:'largepicture',
    data(){
        return {
            height:80,
            top:10,
            left:30
        }
    },
    props:[
        'srcURL'
    ],
    methods:{
        ...mapMutations(['setpicturesize']),
        setpicsizescroll(e){
            this.height -= e.deltaY/50
            this.top += e.deltaY/300
            this.left += e.deltaY/300
        }
    },
}
</script>

<style>
img.largepic {
    position: fixed;
    z-index: 2002;
}
div.shadow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
    z-index: 2000;
}
</style>